<!-- 机构树形 -->
<script setup lang="ts">
import { typeTree, defaultPropsType, twoChhildren } from '@/types/typeData'
import { FolderOpened, Folder } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';

defineProps<{
  treeData?: typeTree
  defaultProps?: defaultPropsType
}>()
const emit = defineEmits<{
  (name: string, val: twoChhildren): any
}>()
const handleNodeClic = (val: twoChhildren): void => {
  emit('handleNodeClick', val)
}
</script>
<template>
  <!-- 左边选择 -->
  <el-card class="left" :shadow="false">
    <el-tree node-key="id" :default-expanded-keys="['1024982867475820033', '1024984540818568481']"
      :default-checked-keys="['1024985257948084801']" :data="treeData" :props="defaultProps" @node-click="handleNodeClic">
      <template #default="{ node, data }">
        <span class="custom" v-show="node.childNodes.length != 0">
          <Folder v-if="!node.expanded" style="color: #419eff;font-size: 18px;"></Folder>
          <FolderOpened v-else style="color: orange;"></FolderOpened>
        </span>
        <span :class="[node.isCurrent ? 'orange' : '']">{{
          node.label }}</span>
      </template>
    </el-tree>
  </el-card>
</template>
<style scoped>
.left {
  width: 214px;
  min-width: 214px;
  min-height: 808px;
  overflow-y: auto;
}

.custom {
  width: 15px;
  display: flex;
  align-items: center;
  /* margin-right: 10px; */
}
</style>